﻿$(function(){
	
	function getNum(i){
		switch(i){			
			case "一":
			return 1;
			break;			
			case "二":
			return 2;
			break;			
			case "三":
			return 3;
			break;
			case "四":
			return 4;
			break;			
			case "五":
			return 5;
			break;			
			case "六":
			return 6;
			break;
			case "七":
			return 7;
			break;			
			case "八":
			return 8;
			break;			
			case "九":
			return 9;
			break;
			case "十":
			return 10;
			break;			
			case "十一":
			return 11;
			break;			
			case "十二":
			return 12;
			break;
		}
	}
	function getString(i){
		switch(i){			
			case 1:
			return "一";
			break;			
			case 2:
			return "二";
			break;			
			case 3:
			return "三";
			break;			
			case 4:
			return "四";
			break;			
			case 5:
			return "五";
			break;			
			case 6:
			return "六";
			break;			
			case 7:
			return "七";
			break;			
			case 8:
			return "八";
			break;
			case 9:
			return "九";
			break;
			case 10:
			return "十";
			break;
			case 11:
			return "十一";
			break;
			case 12:
			return "十二";
			break;
		}
	}
	function getChapterName(i) {
		var chapterName = "";
		i = i + 1;
		switch(i){
			case 1: 
			chapterName = "一";
			break;
			case 2: 
			chapterName = "二";
			break;
			case 3: 
			chapterName = "三";
			break;
			case 4: 
			chapterName = "四";
			break;
			case 5: 
			chapterName = "五";
			break;
			case 6: 
			chapterName = "六";
			break;
			case 7: 
			chapterName = "七";
			break;
			case 8: 
			chapterName = "八";
			break;
			case 9: 
			chapterName = "九";
			break;
			case 10: 
			chapterName = "十";
			break;
			case 11: 
			chapterName = "十一";
			break;
			case 12: 
			chapterName = "十二";
			break;
		}
		return chapterName;
	}
	
	function sectionName(i) {
		var sectionName = "";
		i = i + 1;
		switch(i){
			case 1: 
			sectionName = "1";
			break;
			case 2: 
			sectionName = "2";
			break;
			case 3: 
			sectionName = "3";
			break;
			case 4: 
			sectionName = "4";
			break;
			case 5: 
			sectionName = "5";
			break;
			case 6: 
			sectionName = "6";
			break;
			case 7: 
			sectionName = "7";
			break;
			case 8: 
			sectionName = "8";
			break;
			case 9: 
			sectionName = "9";
			break;
		}
		return sectionName;
	}

	$.ajax({
			type:"GET",
			url:"zhnagjie.json",			
			dataType:"json",
			success:function(result){				
				if(result.data!=null){
					//遍历章
					var items=result.data;			
					for (var i = 0; i< items.length; i++) {
						$('<div/>',{	      		  			
	  		  			html:
	  		  			'<div class="chapter-err-title">'+
		  		  			'<label for="">第'+							
			  		  			'<span>'+getChapterName(i)+
								'</span>'+								
								"章:"+
								'<input value='+items[i].chapterName+'>'+
								'</input>'+
								'<i class="chapter-icon"></i>'+
							'</label>'+
							'<div class="chapter-err-change">'+
								'<input type="button" class="insert" name="" value="插入"></span>'+
								'<input type="button" class="modify" name="" value="修改"></span>'+
								'<input type="button" class="delete" name="" value="删除"></span>'+
							'</div>'+
						'</div>'
	  		  		}).appendTo('.'+'chapter-err').addClass("additional");	  		  		
					//遍历节
					var sectionData = items[i].sectionData;					
						for (var j = 0; j < sectionData.length; j++){					
							$(".additional").eq(i).append(
								'<ul class="ul">'+
									'<li>'+
										'<span>'+
											'<em class="hyem">'+(i+1)+
											'</em>'+
											"."+
											'<em>'+(j+1)+
											'</em>'+":"+
											'<input value='+sectionData[j].sectionName+'>'+
											'</input>'+
											'<i class="section-icon"></i>'+
										'</span>'+
										'<div class="chapter-change">'+
											'<input type="button" class="insert" name="" value="插入"></span>'+
											'<input type="button" class="modify" name="" value="修改"></span>'+
											'<input type="button" class="delete" name="" value="删除"></span>'+
											'<input type="button" class="tasks" name="" value="+添加学习任务">'+	
										'</div>'+
									'</li>'+
									'<li>'+
										'<input type="button"  class="task" name="" value="+添加学习任务">'+
								    '</li>'+								
								'</ul>'
							);					
						}//遍历节结束									
					}//遍历章结束
					
					$(".additional").append(
							'<div class="addSection">'+
								'<input type="button" class="add-section" name="" value="+新增一节">'+
							'</div>'					
					);

					$(
					'<div class="addChapter">'+
						'<input type="button"  name="" value="+新增一章">'+
					'</div>'
					).appendTo('.chapter-err');					
				}else{					
					$(".chapter-err").append(
						'<div class="addChapter">'+
							'<input type="button"  name="" value="+新增一章">'+
						'</div>'
					);					
				}
				return false;				
			}//success结束
		})//ajax结束

		//点击新增节
		$("body").on('click','.additional .addSection .add-section',function(){
			var i=$(this).parent().parent().prevAll().length;
			var j=$(this).parent().prevAll().length;			
			$(this).parent().after(
				'<ul>'+
					'<li>'+
						'<span>'+
							'<em class="hyem">'+(i+1)+
							'</em>'+
							'.'+
							'<em>'+j+
							'</em>'+":"+
							'<input value='+"请填写节的内容"+'>'+
							'</input>'+
							'<i class="section-icon"></i>'+
						'</span>'+
						'<div class="chapter-change">'+
							'<input type="button" class="insert" name="" value="插入"></span>'+
							'<input type="button" class="modify" name="" value="修改"></span>'+
							'<input type="button" class="delete" name="" value="删除"></span>'+
							'<input type="button" class="tasks" name="" value="+添加学习任务">'+	
						'</div>'+
					'</li>'+
					'<li>'+
						'<input type="button"  class="task" name="" value="+添加学习任务">'+
				    '</li>'+					
				'</ul>'+
				'<div class="addSection">'+
					'<input type="button" class="add-section" name="" value="+新增一节">'+
				'</div>'
			);
			$(this).parent().remove();
		})
		
		
			
		//点击插入章
		$("body").on('click','.additional .chapter-err-change .insert',function(){			
			var i=($(this).parent().parent().parent().prevAll().length)+1;			
			$(this).parent().parent().parent().after(
				'<div class="additional">'+
					'<div class="chapter-err-title">'+
						'<label for="">第'+
							'<span>'+getChapterName(i)+
							'</span>'+								
							"章:"+ 
							'<input value='+"请输入章的名称"+'>'+
							'</input>'+
							'<i class="chapter-icon"></i>'+
						'</label>'+
						'<div class="chapter-err-change">'+
							'<input type="button" class="insert" name="" value="插入"></span>'+
							'<input type="button" class="modify" name="" value="修改"></span>'+
							'<input type="button" class="delete" name="" value="删除"></span>'+											
						'</div>'+					
					'</div>'+
					'<div class="addSection">'+
						'<input type="button" class="add-section" name="" value="+新增一节">'+
					'</div>'+
				'</div>'
			);
			//点击插入章之后显示对于的章
			var hyb=$(this).parent().parent().parent().next().nextAll(".additional").find(".chapter-err-title").find("label").find("span");
			
			for(var i = 0;i<hyb.length;i++){
				hyb[i].innerHTML = getString(getNum(hyb[i].innerHTML)+1);
			}
			
			//点击插入章后改变节的序号
			var hyjie = $(this).parent().parent().parent().next().nextAll('.additional').children('ul').children('li').children('span').children('.hyem');
				//console.log(hyjie.length);			
			var hylength = hyjie.length;
			
			for(var j = 0;j<hylength;j++){
				console.log(hyjie[j]);
				hyjie[j].innerHTML = Number(hyjie[j].innerHTML)+1;			
			}
			
		})
		
		//点击新增章
		$("body").on('click','.addChapter input',function(){			
			var i=$(this).parent().prevAll().length;
			$(this).parent().before(
				'<div class="additional">'+
					'<div class="chapter-err-title">'+
						'<label for="">第'+
							'<span>'+getChapterName(i)+
							'</span>'+								
							"章:"+ 
							'<input value='+"请输入章的名称"+'>'+
							'</input>'+
							'<i class="chapter-icon"></i>'+
						'</label>'+
						'<div class="chapter-err-change">'+
							'<input type="button" class="insert" name="" value="插入"></span>'+
							'<input type="button" class="modify" name="" value="修改"></span>'+
							'<input type="button" class="delete" name="" value="删除"></span>'+						
						'</div>'+					
					'</div>'+				
					'<div class="addSection">'+
						'<input type="button" class="add-section" name="" value="+新增一节">'+
					'</div>'+
				'</div>'
			);			
		})

		
		//点击插入节
		$(".chapter-err").on('click','.additional li:first-child .chapter-change .insert',function(){
			var i=$(this).parent().parent().parent().parent().prevAll().length
			var j=($(this).parent().parent().parent().prevAll().length)+1;				
			$(this).parent().parent().parent().after(
				'<ul>'+
				'<li>'+
					'<span>'+
						'<em class="hyem">'+(i+1)+
						'</em>'+
						"."+
						'<em>'+j+
						'</em>'+":"+
						'<input value="请输入节的名称">'+
						'</input>'+
						'<i class="section-icon"></i>'+
					'</span>'+
					'<div class="chapter-change">'+
						'<input type="button" class="insert" name="" value="插入"></span>'+
						'<input type="button" class="modify" name="" value="修改"></span>'+
						'<input type="button" class="delete" name="" value="删除"></span>'+
						'<input type="button" class="tasks" name="" value="+添加学习任务">'+	
					'</div>'+
				'</li>'+
				'<li>'+
					'<input type="button"  class="task" name="" value="+添加学习任务">'+
			    '</li>'+			  
			'</ul>'
			);			
			
			var hyaa=$(this).parent().parent().parent().next().nextAll("ul").find("li:first-child").find("span:first-child").find("em:nth-child(2)");
			var length=hyaa.length;			
			for(var i=0; i<length; i++){				
				hyaa[i].innerHTML =Number(hyaa[i].innerHTML)+1;
			}
			
		})
	
		//点击删除章
		$("body").on('click','.chapter-err-title .delete',function(){
			//改变章的序号
			var hyb=$(this).parent().parent().parent().nextAll(".additional").find(".chapter-err-title").find("label").find("span");			
			for(var i = 0;i<hyb.length;i++){
				hyb[i].innerHTML = getString(getNum(hyb[i].innerHTML)-1);
			}
			
			//点击删除章后改变节的序号
			var hyjie = $(this).parent().parent().parent().nextAll('.additional').children('ul').children('li').children('span').children('.hyem');
				//console.log(hyjie.length);			
			var hylength = hyjie.length;
			
			for(var j = 0;j<hylength;j++){
				console.log(hyjie[j]);
				hyjie[j].innerHTML = Number(hyjie[j].innerHTML)-1;			
			}
			//删除章
			$(this).parent().parent().parent().remove();
		})
		
		//点击删除节
		$("body").on('click','.additional ul li:first-child .chapter-change .delete',function(){				
			var hya=$(this).parent().parent().parent().nextAll("ul").find("li:first-child").find("span:first-child").find("em:nth-child(2)");
			var length=hya.length;
			
			for(var i=0; i<length; i++){
				//console.log(hya[i].innerHTML);
				hya[i].innerHTML = hya[i].innerHTML-1;
			}
			
			
			$(this).parent().parent().parent().remove();
		})
		
		//点击删除视频
		$('body').on('click','.additional ul li:not(":first") .delete',function(){			
			$(this).parent().parent().remove();
		})
					
		//点击修改章
		$(".chapter-err").on('click','.chapter-err-title .modify',function(){
			$(this).parent().parent().find("label").find("input").css("background","none")
			//alert($(this).index(this)) //点击当前事件的索引
			$(this).parent().parent().find("label").find("input").css({"border":"1px solid #d1d1d1","padding":"2px"})
			$(this).parent().parent().find("label").find("input").focus(function(){
				$(this).css("background","none");
			}).val("");
			$(this).parent().parent().find("label").find("input").blur(function(){
				if($(this).parent().parent().find("label").find("input").val() !=""){					
					$(this).css("background","url(img/icon-form.png) no-repeat 105px -235px");
				}
				$(this).css("border","1px solid #fff")
			})
		})
	
		//点击修改节
		$(".chapter-err").on('click','.additional li:first-child .chapter-change .modify',function(){
			$(this).prev().find("input").css("background","none");
			$(this).parent().prev().find("input").css({"border":"1px solid #d1d1d1","padding":"2px"})
			$(this).parent().prev().find("input").focus(function(){
				
			}).val("");
			$(this).parent().prev().find("input").blur(function(){
				if($(this).parent().prev().find("input").val() != ""){
					$(this).css("background","url(img/icon-form.png) no-repeat 105px -235px");
				}
				$(this).css("border","1px solid #fff");			
			})
		})
		
		//点击修改视频名称
		$("body").on('click','.additional ul li:not(":first") .chapter-change .modify',function(){
			
			$(this).parent().parent().find("input:eq(0)").css("background","none");
			$(this).parent().parent().find("input:eq(0)").css({"border":"1px solid #d1d1d1","padding":"2px"})
			$(this).parent().parent().find("input:eq(0)").focus(function(){
				
			}).val("");
			$(this).parent().parent().find("input:eq(0)").blur(function(){

	
	var _msg=$(this).parent().find("input:eq(0)");	
	for(var i=0; i<_msg.length; i++){
		$(this).parent().find("input:eq(0)").next(".two-msg").find("input").val(_msg[i].value);
	}
	
	if($(this).parent().parent().find("input:eq(0)") != ""){
					$(this).css("background","url(img/icon-form.png) no-repeat 112px -236px");
				}
				$(this).css("border","1px solid #fff");			
			})
		})
		
		//点击节展开与显示
		$("body").on('click','.additional ul li:first-child span .section-icon',function(){
			if($(this).parent().parent().nextAll().css("display") == "none"){				
				$(this).parent().parent().nextAll().css("display","block");
				$(this).css("background","url(img/prev_select.png) no-repeat left center");
			}else{				
				$(this).parent().parent().nextAll().css("display","none");
				$(this).css("background","url(img/next.png) no-repeat left center");
			}
			
		})
	
		
		//点击章展开与显示
		$("body").on('click','.additional .chapter-err-title .chapter-icon',function(){
			if($(this).parent().parent().nextAll().css("display") == "none"){							
				$(this).parent().parent().nextAll().css("display","block");
				$(this).parent().parent().css("border-bottom","1px solid #f2f2f2")
				$(this).css("background","url(img/prev_select.png) no-repeat left center");
			}else{							
				$(this).parent().parent().nextAll().css("display","none");							
				$(this).parent().parent().css("border-bottom","1px solid #f2f2f2")
				$(this).css("background","url(img/next.png) no-repeat left center");
			}
			
		})
		
		
	var _this=null;
	var _this_=null;
	var that = null;
	//弹出选择章节视频
	$('body').on('click','.additional ul li .tasks',function(event){
	  		_this = $(this);
	  	that = $(this).parent().parent().parent().children().last();	  
	    if($(event.target).is($('.tasks'))) {
	    	 $('.popup').addClass('is-visible');
	    }
	});
	  
	//点击插入弹出选择章节视频
	$('body').on('click','.additional ul li:not(":first") .insert',function(){
	  	that = $(this).parent().parent().next();	 
	    $('.popup').addClass('is-visible');	   
	});
	  
	//关闭弹出窗口 
	$('body').on('click','.enroll-chapter .title i',function(event){ 
	      $('.popup').removeClass('is-visible'); 
	}); 
	//关闭弹出窗口 
	$('body').on('click','.cancel',function(event){ 
	      $('.popup').removeClass('is-visible'); 
	});
	//使用Esc键关闭弹出窗口 
	$(document).keyup(function(event){ 
	    if(event.which=='27'){ 
	      $('.popup').removeClass('is-visible'); 
	    } 
	});	
	//点击高亮当前的li
	$("body").on('click','.enroll-chapter ul li',function(){
		$(this).addClass("active").siblings().removeClass("active");
		msg=$(this).html();		
	});
	
	//点击确定
	$("body").on('click','.ensure',function(){		
			that.before(
			'<li>'+
				'<input type="text" value='+msg+' class="addInput">'+			
				'<div class="two-msg">'+
					'<input type="text" value='+msg+'>'+
					'<em>(00:16:08)'+
					'</em>'+
				'</div>'+
				'<div class="chapter-change">'+
				'	<input type="button" class="insert" name="" value="插入"/>'+
					'<input type="button" class="modify" name="" value="修改"/>'+
					'<input type="button" class="delete" name="" value="删除"/>'+
					'<input type="button" class="tasks" name="" value="+添加学习任务"/>'+
				'</div>'+
			'</li>'
		);
		
		$('.popup').removeClass('is-visible');
		
	});
	
	//点击最后一个li添加学习任务
	$("body").on('click','.task',function(){
		that = $(this).parent();		
		$('.popup').addClass('is-visible');
	})

})
